<template>
  <div class="w h over-a-y">
    <div class="w box-b  f-s" style="height:calc(100% - 40px)">
      <el-table :data="tableList" height="100%">
        <el-table-column v-for="(column, i) in  dataLayout" :key="i" :prop="column.prop" :label="column.label"
          :width="column.width || 'auto'" :style="[column.style || '']">
          <template #default="{ row }">
            <span v-html="getRenderTableValue(column, row)"></span>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="操作" width="400">
          <template #default="scope">
          <el-button type="text" @click="detailed(scope.row.id)">任务详情</el-button>
          <el-button type="text" @click="taggingTask(scope.row.photoListId)">查看数据集</el-button>
          <el-button type="text">查看进度</el-button>
          <el-button type="text" @click="stopTask=true">中止任务</el-button>
          <el-button type="text" @click="dialogVisibleDel=true">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
       <el-dialog
    v-model="dialogVisibleDel"
    title="提示"
    width="30%"
  >
    <span style="font-weight: 600;">确认是否要删除</span>
    <template #footer>
      <span>
        <el-button @click="dialogVisibleDel=false">取消</el-button>
        <el-button type="primary" @click="submitDel">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
       <el-dialog
    v-model="stopTask"
    title="提示"
    width="30%"
  >
    <span style="font-weight: 600;">确认是否要终止任务</span>
    <template #footer>
      <span>
        <el-button @click="stopTask=false">取消</el-button>
        <el-button type="primary" @click="submitStop">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
       <el-dialog
    v-model="taskdetailed "
    title="查看任务详情"
    width="40%"
  >
     <div class="taskdetailed">
      <div class="taskLabel">
        开始时间:
      </div>
      <div class="taskVal">
        {{taskDetailed.creatTime}}
      </div>
    </div>
      <div class="taskdetailed">
      <div class="taskLabel">
        任务名称:
      </div>
      <div class="taskVal">
        {{taskDetailed.name}}
      </div>
    </div>
       <div class="taskdetailed">
      <div class="taskLabel">
        数据标注状态:
      </div>
      <div class="taskVal">
        {{taskdetailed.assignADataType==1?'未标注':'已标注'}}
      </div>
    </div>
      <div class="taskdetailed">
      <div class="taskLabel">
        标注团队名称:
      </div>
      <div class="taskVal">
       {{taskDetailed.annotationTeamName}}
      </div>
    </div>
       <div class="taskdetailed">
      <div class="taskLabel">
        分配方式:
      </div>
      <div class="taskVal">
        均分
      </div>
    </div>
        <div class="taskdetailed">
      <div class="taskLabel">
        每人分配数量:
      </div>
      <div class="taskVal">
        {{taskDetailed.annotationNumber}}
      </div>
    </div>
        <div class="taskdetailed">
      <div class="taskLabel">
        成员权限范围:
      </div>
      <div class="taskVal">
        {{taskDetailed.doDelete==1?'可删除图片':''}}
      </div>
    </div>
         <div class="taskdetailed">
      <div class="taskLabel">
        任务截止时间:
      </div>
      <div class="taskVal">
        {{ taskDetailed.annotationEndTime}}
      </div>
    </div>
           <div class="taskdetailed">
      <div class="taskLabel">
        标注完数据集:
      </div>
      <div class="taskVal">
        {{taskDetailed.photoListName}}
      </div>
    </div>
    <template #footer>
      <span>
        <el-button type="primary" @click="taskdetailed=false">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
    <div class="w f-e">
      <el-pagination v-model:current-page="current" :page-size="size" :background="false"
        layout="total, sizes, prev, pager, next, jumper" :page-sizes="[100, 200, 300, 400]" :total="total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
     
  </div>
 
</template>

<script lang="ts">


import { type RequestCode } from '@/server/base'
import { MyTask } from '@/apis/myTask/index'
import { tableInfo } from './res';
import {getNowDate} from "@/utils"

export default {
  name: 'ownerTask',
  data() {
    return {

      current: 1,
      size: 100,
      total: 1,
      pages: 1,

      // s=  {
      //   "id": 21, "name": "test",
      //  "": 1, "": 1, "": 1, "": 2, "": 7, "": 7, "": 12, "": "2023-04-05T16:00:00.000Z", "": 0,
      //   "reviewTeamId": 7, "samplingRatio": 12.0, "creatorId": 27
      // },
      dataLayout: tableInfo.layout as any[],
      tableList: [],
      dialogVisibleDel:false,
      taskdetailed:false,
      stopTask:false,
      taskDetailed:{} as any
    }
  },
  methods: {
    detailed(id:number|string){
      MyTask.detailed(id).then((res:RequestCode)=>{
        this.taskDetailed=res.data
          this.taskDetailed.creatTime=getNowDate(0, new Date( this.taskDetailed.creatTime)).substring(0, 16)
           this.taskDetailed.annotationEndTime=getNowDate(0, new Date( this.taskDetailed.annotationEndTime)).substring(0, 16)
        this.taskdetailed=true
      })
    },
    taggingTask(photoListId:number){
        this.$router.push({ name: 'taggingManage', params: { projectId: photoListId} })
    },  
    submitDel(){
      this.dialogVisibleDel=false
    },
    submitStop(){
      this.stopTask=false
    },
    handleSizeChange(val: number) {
      this.size = val
      this.current = 1
      this.getDataList()
    },
    handleCurrentChange(val: number) {
      this.current = val
      this.getDataList()
    },

    getRenderTableValue: tableInfo.getRenderTableValue,
    getDataList() {
      const params = {
        current: this.current,
        size: this.size,
      }
      MyTask.list(params)
        .then((res: RequestCode) => {
          const { total, size, current, pages, records } = res.data
          this.total = total
          this.size = size
          this.current = current
          this.pages = pages

          this.tableList = records

        })
        .catch(() => { })
    }
  },
  created() {
    this.getDataList();
  }
}
</script>

<style lang="scss" scoped>
  .taskdetailed{
        margin-top: 20px;
    display: flex;
    .taskLabel{
      margin-right: 20px;
      width: 150px;
      text-align: right;
    }
  }
</style>